<template>
  <YsRow>
    <YsRow>
      <p class="textarea-title text_01">专家评审</p>
      <YsInput size="large" class="textarea-h" :class="curTheme" :maxlength="300" type="textarea" v-model="remark"
        show-word-limit :autosize="{ minRows: 7, maxRows: 5 }"></YsInput>
    </YsRow>
    <YsRow class="specialist">
      <p class="textarea-title text_01">检测结果</p>
      <div class="specia-box">
        <div class="rec" v-for="(item,index) in accord" @click="setAccordItem(item,index)">
          <div class="rec-box " :class="{current:curItem==item.label}"></div>
          <span class="rec-text text_01">{{item.label}}</span>
        </div>
      </div>
    </YsRow>
    <YsRow class="specialist">
      <YsRow :gutter="16">
        <YsCol span="5">
          <p class="textarea-title text_01">检测：</p>
          <YsDatePicker v-model="testing" transfer type="date" :class="curTheme" class="picker_border border_style"
            @on-change="testing=$event" :format="`yyyy-MM-dd`" placement="bottom-end"></YsDatePicker>
        </YsCol>
        <YsCol span="5">
          <p class="textarea-title text_01">审核：</p>
          <YsDatePicker v-model="examine" transfer type="date" :class="curTheme" class="picker_border border_style"
            @on-change="examine=$event" :format="`yyyy-MM-dd`" placement="bottom-end"></YsDatePicker>
        </YsCol>
      </YsRow>
    </YsRow>
  </YsRow>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: 'fourTemplate',
  props: {
    templateBean: {
      type: Object,
      default: () => {
        return {}
      }
    },
    reportDataBean: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    ...mapState(['curTheme']),
  },
  watch: {
    reportDataBean(v) {
      if (v && v.table_field_data4) {
        for (let i = 0; i < v.table_field_data4.length; i++) {
          let curdata = v.table_field_data4[i]
          let data = this.templateFields4.find(item => { return item.field_id == curdata.values[0].column_id })
          if (data.field_name == "专家评审") {
            this.remarkObj.tableField = curdata
            this.remark = curdata.values[0].value
          } else if (data.field_name == "检测结果") {
            this.curItemObj.tableField = curdata
            this.curItem = curdata.values[0].value
          } else if (data.field_name == "检测时间") {
            this.testingObj.tableField = curdata
            this.testing = curdata.values[0].value
          } else if (data.field_name == "审核时间") {
            this.examineObj.tableField = curdata
            this.examine = curdata.values[0].value
          }
        }
      }
    },
    templateBean(v) {
      if (v && v.templateFields4) {
        this.templateFields4 = v.templateFields4
        this.remarkObj = v.templateFields4[0]
        this.curItemObj = v.templateFields4[1]
        this.testingObj = v.templateFields4[2]
        this.examineObj = v.templateFields4[3]
      }
    },
    remark(newdata, loddata) {
      if (this.remarkObj.tableField && this.remarkObj.tableField.row_id) {
        this.remarkArr[0] = this.setConentAll(3, this.remarkObj, newdata)
      } else {
        this.remarkArr[0] = this.setConentAll(1, this.remarkObj, newdata)
      }
    },
    curItem(newdata, loddata) {

      if (this.curItemObj.tableField && this.curItemObj.tableField.row_id) {
        this.curItemArr[0] = this.setConentAll(3, this.curItemObj, newdata)
      } else {
        this.curItemArr[0] = this.setConentAll(1, this.curItemObj, newdata)
      }
    },

    testing(newdata, loddata) {

      if (typeof newdata == 'string') {
        if (this.testingObj.tableField && this.testingObj.tableField.row_id) {
          this.testingArr[0] = this.setConentAll(3, this.testingObj, newdata)
        } else {
          this.testingArr[0] = this.setConentAll(1, this.testingObj, newdata)
        }
      }
    },
    examine(newdata, loddata) {
      if (typeof newdata == 'string') {
        if (this.examineObj.tableFiel && this.examineObj.tableField.row_id) {
          this.examineArr[0] = this.setConentAll(3, this.examineObj, newdata)
        } else {
          this.examineArr[0] = this.setConentAll(1, this.examineObj, newdata)
        }
      }

    },
  },
  data() {
    return {
      templateFields4: [],
      remarkArr: [],
      curItemArr: [],
      testingArr: [],
      examineArr: [],
      remark: "",
      testing: "",
      examine: "",
      curItem: null,
      operateTelData: [],
      user_cn_name: "",
      accord: [
        { label: "符合要求", value: "", id: 1 },
        { label: "不符合要求", value: "", id: 2 },
      ]
    }
  },
  methods: {
    setConentAll(num, item, data) {
      return {
        id: item.tableField && item.tableField.row_id ? item.tableField.row_id : "",//新增不用传id
        file_id: this.$route.query.file_id,
        tp_id: this.$route.query.template_id,
        data_class: item.field_class,
        tf_id: item.id,
        operator_type: num,
        reportDetailBeans: [
          {
            id: item.tableField && item.tableField.values[0].row_id || "",
            field_id: item.field_id,
            report_val: data
          }
        ]
      }
    },
    setAccordItem(item, index) {
      this.curItem = item.label
    },
    //设置参数
    setoperate() {
      this.operateTelData = [...this.remarkArr, ...this.curItemArr, ...this.testingArr, ...this.examineArr]
    }
  }
}
</script>
<style scoped lang='less'>
.textarea-title {
  font-size: 16px;
  font-family: PingFangSC-Regular;
  margin: 24px 0 16px 0;
}

.textarea-h {
  /deep/ textarea {
    line-height: 24px !important;
  }
}

.theme-blue.textarea-h {
  border: 1px solid #566582 ;
}

.specialist {
  .specia-box {
    display: flex;

    .rec {
      display: flex;
      align-items: center;
      margin-right: 24px;
      cursor: pointer;

      .rec-box {
        width: 16px;
        height: 16px;
        background: rgba(255, 255, 255, 0.39);
        border: 1px solid #405580;
        border-radius: 50%;
        margin-right: 8px;
      }

      .current {
        border: 5px solid #0061ff;
      }

      .rec-text {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color: #405580;
        opacity: 1;
      }
    }
  }

  /deep/.ivu-date-picker {
    width: 100% !important;
  }
}

/deep/ .ivu-input-word-count {
  top: initial !important;
  bottom: 10px !important;
}

.theme-blue.picker_border {
  border: 1px solid #ccc;
}
</style>
